<template>
  <div id="home"
       v-if="state">
    <div class="page">
      <top-bar></top-bar>
      <div class="main">
        <top-header></top-header>
        <div v-loading="loading"
             class="m-swiper">
          <el-carousel :interval="3000"
                       height="500px">
            <el-carousel-item v-for="(item, index) in bannerList"
                              :key="index">
              <a class="banner-item"
                 :href="item.linkUrl"
                 target="_Blank"
                 :style="{backgroundImage: 'url('+ item.imageUrl + ')'}"></a>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="main-content">
          <div class="main-box">
            <div class="main-left">
              <div class="left-tit">
                <i class="icon-title"></i>
                <span class="title">爆炸资讯</span>
              </div>
              <div class="left-msg">
                <router-link :to="{ path:'/home/news', query:{'id': item.id}}"
                             v-for="(item, index) in topInfo"
                             :key="index"
                             class="left-item"
                             v-if="item.isTop == 'y'">
                  <img :src="item.imageUrl"
                       alt="">
                  <p class="item-info">{{ item.infoTitle }}</p>
                </router-link>
              </div>
            </div>
            <div class="main-right">
              <div class="right-tit">
                <i class="icon-title"></i>
                <span class="title">研发动态</span>
                <div class="more-msg">
                  <span class="more-title">更多</span>
                  <i class="more-icon"></i>
                </div>
              </div>
              <div class="right-msg">
                <div v-if="infoList == ''"
                     class="right-item">
                  <span class="item-msg">暂无数据！</span>
                  <!-- <span class="item-date">07-14</span> -->
                </div>
                <router-link v-else
                             :to="{ path:'/home/news', query:{'id': item.id}}"
                             v-for="(item, index) in infoList"
                             :key="index"
                             class="right-item">
                  <span class="item-msg">{{ item.infoTitle }}</span>
                  <span class="item-date">{{ getTime(item.gmtCreated) }}</span>
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="mb-swiper">
          <div class="mb-box">
            <div class="swiper-title">
              <i class="icon-title"></i>
              <span class="title">重点项目</span>
            </div>
            <div class="swiper-main">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"
                       @click="$router.push('/projects/project?id='+item.id)"
                       v-for="(item, index) in imageArr"
                       :key="index + 1"
                       :style="{backgroundImage: 'url('+ item.url + ')'}">
                    <div class="hover-tip">{{item.projectName}}</div>
                  </div>
                </div>
              </div>
              <div class="swiper-prev swiper-button-prev"
                   @click="preProjects"></div>
              <div class="swiper-next swiper-button-next"
                   @click="moreProjects"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom-tab class="bottom-bar"></bottom-tab>
    <router-view class="news-view"></router-view>
  </div>
</template>

<script>
import topBar from "@/components/top-bar";
import topHead from "@/components/top-head";
import bottomTab from "@/components/bottom-tab";
import Swiper from "../../../static/js/swiper-4.3.3.min.js";

let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");

export default {
  components: {
    "top-bar": topBar,
    "top-header": topHead,
    "bottom-tab": bottomTab
  },
  data() {
    return {
      loading: true,
      bannerList: [],
      topInfo: [],
      pageIndex: 1,
      pageSize: 10,
      projectList: [
        {
          isImportant: 'n',
          imageUrls: []
        }
      ],
      pageCount: 0,
      importantArr: [
        {
          imageUrls: []
        }
      ],
      imageArr: [],
      infoList: {},
      state:false
    };
  },
  watch: {
    projectList: {
      immediate: false,
      handler: function() {
        let importantArr = {};
        importantArr = this.projectList.filter(function(item) {
          if (item.isImportant === "y") {
            return item;
          }
        });
        // console.log("重点项目：", importantArr);
        this.importantArr = importantArr;
      }
    },
    importantArr: function() {
      const res = [];
      this.importantArr.forEach(item => {
        if (item.imageUrls && item.imageUrls.length > 0) {
          item.imageUrls[0].projectName = item.projectName;
          item.imageUrls[0].id = item.id
          res.push(item.imageUrls[0])
          // item.imageUrls.forEach(imageUrlsItem => {
          //   imageUrlsItem.projectName = item.projectName;
          //   imageUrlsItem.id = item.id;
          //   res.push(imageUrlsItem);
          // });
        }
      });
      this.imageArr = res;
      this.$nextTick(function() {
        this.mySwiper.update(true)
      });
      // console.log(this.imageArr,'aaa')
    }
  },
  created() {
    this.mySwiper = new Swiper(".swiper-container", {
      loop: true,
      notNextTick: true,
      // spaceBetween: 7,
      slidesPerView: 5,
      slidesPerGroup: 5,
      slidesOffsetAfter: 120,
      loopFillGroupWithBlank: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  },
  mounted() {
    this.getBanner();
    this.getTopInfo();
    this.getInfo();
    this.getinformList();
  },
  methods: {
    moreProjects() {
      if (this.pageIndex < this.pageCount) {
        this.pageIndex = this.pageIndex + 1;
        this.getinformList();
      } else {
        return false
      }
    },
    preProjects() {
      if (this.pageIndex == 1) {
        return false;
      } else {
        this.pageIndex = this.pageIndex - 1;
        this.getinformList();
      }
    },
    getTime(time) {
      return time.slice(5, 10);
    },
    getNews(id) {
      this.$router.push({ path: "/news", query: { id: id } });
    },
    getBanner() {
      this.loading = true;
      let url = CONSTANT.URL.BANNER.GETBANNER;
      let data = {};
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data.bussData;
        this.bannerList = data;
        // console.log('轮播图:',data);
      });
    },
    getTopInfo() {
      this.loading = true;
      let url = CONSTANT.URL.INFO.GETTOPINFO;
      let data = {};
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data.bussData;
        this.topInfo = data;
        this.state = true
        // console.log('爆炸资讯:',data);
      });
    },
    getInfo() {
      this.loading = true;
      let url = CONSTANT.URL.INFO.GETINFOBYPAGE;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data.bussData;
        this.infoList = data;
        // console.log("爆炸资讯:", data);
      });
    },
    getinformList() {
      this.loading = true;
      let url = CONSTANT.URL.PROJECTS.GETPROJECTSBYPAGE;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: 5,
        projectName: this.projectName ? this.projectName : null,
        phaseCode: this.phaseCode ? this.phaseCode : null,
        typeCode: this.typeCode ? this.typeCode : null,
        levelCode: this.levelCode ? this.levelCode : null,
        isImportant: "y"
      };
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data.bussData;
        this.projectList = data;
        this.pageCount = res.data.pageCount
        // console.log('所有数据',data);
        this.loading = false;
      });
    }
  }
};
</script>

<style>
.m-swiper .el-carousel__button {
  height: 14px;
  width: 14px;
  border-radius: 50%;
}
.m-swiper .el-carousel__indicator {
  padding: 16px 5px;
}
</style>


<style scoped>
#home {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.page {
  min-height: 100%;
  padding-bottom: 210px;
}
.bottom-bar {
  position: relative;
  left: 0;
  bottom: 0;
  margin-top: -210px;
  clear: both;
}
.m-swiper img {
  display: inline-block;
  height: 500px;
  width: 100%;
}
.banner-item {
  display: inline-block;
  text-align: center;
  color: #475669;
  font-size: 14px;
  height: 500px;
  width: 100%;
  line-height: 500px;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.main-content {
  background: rgba(245, 245, 245, 1);
  padding-top: 56px;
  padding-bottom: 70px;
}
.main-box {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.main-box .title {
  font-size: 24px;
  padding-left: 14px;
  font-weight: bold;
  color: rgba(17, 17, 17, 1);
}
.main-left {
  width: 625px;
}
.left-msg {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.left-item {
  width: 300px;
  height: 160px;
  background-color: #475669;
  margin-top: 20px;
  margin-right: 12px;
  position: relative;
}
.left-item:hover {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
}
.left-item img {
  width: 300px;
  height: 160px;
}
.left-item .item-info {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 10px 0 10px;
  height: 36px;
  width: 280px;
  line-height: 36px;
  font-size: 16px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-right {
  width: 500px;
}
.right-tit {
  position: relative;
}
.right-tit .more-msg {
  position: absolute;
  right: 0;
  top: 6px;
  font-size: 16px;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}

.right-tit .more-msg:hover {
  color: rgba(195, 24, 31, 1);
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.right-tit .more-title {
  padding-right: 10px;
}
.right-tit .more-icon {
  width: 14px;
  height: 12px;
  background: url(../../assets/more_icon.png) no-repeat 100% 100%;
  background-size: cover;
  display: inline-block;
}
.right-msg {
  margin-top: 40px;
}
.right-msg .right-item {
  display: inline-block;
  text-decoration: none;
  margin-top: 20px;
  width: 500px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.right-item .item-msg {
  color: #000000;
  width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.right-item .item-date {
  color: rgba(153, 153, 153, 1);
}

.right-item:hover .item-date {
  color: rgba(195, 24, 31, 1);
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.right-item:hover .item-msg {
  color: rgba(195, 24, 31, 1);
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.icon-title {
  width: 14px;
  height: 14px;
  background: url(../../assets/m_item_icon.png) no-repeat 100% 100%;
  background-size: cover;
  display: inline-block;
}
.mb-swiper {
  padding: 60px 0 50px 0;
}
.mb-box {
  width: 1200px;
  margin: 0 auto;
}
.swiper-title .title {
  font-weight: bold;
  font-size: 24px;
  padding-left: 14px;
  color: rgba(17, 17, 17, 1);
}

.swiper-container {
  margin-top: 38px;
  height: 125px;
  width: 970px;
  padding: 0 100px 0 0;
}
.swiper-main {
  position: relative;
}
.swiper-prev {
  width: 17px;
  height: 43px;
  background: url(../../assets/prev.png) no-repeat 100% 100%;
  background-size: cover;
  position: absolute;
  left: 25px;
  top: 50%;
  margin-top: -21px;
  cursor: pointer;
}
.swiper-next {
  width: 17px;
  height: 43px;
  background: url(../../assets/next.png) no-repeat 100% 100%;
  background-size: cover;
  position: absolute;
  right: 25px;
  top: 50%;
  margin-top: -21px;
  cursor: pointer;
}
.swiper-slide {
  position: relative;
  width: 198px;
  height: 125px;
  background-repeat: no-repeat;
  margin: 0 10px 0 10px;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  background-size: cover;
}

.swiper-slide:hover .hover-tip {
  display: block;
}

.hover-tip {
  display: none;
  position: absolute;
  opacity: 1;
  box-sizing: border-box;
  left: 2px;
  right: 2px;
  bottom: 0;
  padding: 10px;
  z-index: 2000;
  font-size: 12px;
  line-height: 1;
  min-width: 10px;
  /* background: #303133; */
  color: #fff;
}

.swiper-slide:hover {
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

.news-view {
  position: relative;
  z-index: 999;
}
</style>